<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<c:import url="/WEB-INF/jsp/head.jsp"/>
	<script type="text/javascript">
		$(document).ready(function() {
			
			$("#btnSalvar").click(function(){

				if ($("#divisaoQuestionarioDescricao").val() == "")
				{
					alert("O campo Descrição deve ser preenchido!!!");
					return;
				}

				var selecionado = false;
				$("input[type=checkbox]").each(function(){
					if($(this).is(':checked'))
					{
						selecionado = true;
						return;
					}
				});

				if (!selecionado)
				{
					alert("Pelo menos uma questão deve ser selecionada para esta subdivisão!!!");
					return;					
				}
				
				$("#frmSubDivisao").submit();
				
			});
			
		});
	</script>
</head>
<body>

	<c:import url="/WEB-INF/jsp/cabecalho.jsp"/>
	
	<h3 align="center">Cadastro de Questionário</h3>
	
	<form name="frmSubDivisao" id="frmSubDivisao" method="post" action="<c:url value="/questionario/subdivisao/salvar"/>">
	
		<c:if test="${not empty errors}">
			<div id="erros" style="color:red" class="erros">
				Foram encontrados erros no cadastro:<br/>
				<ul>
				<c:forEach var="error" items="${errors}">
				    <li>${error.message}</li>
				</c:forEach>
				</ul>
			</div>
		</c:if>
	
		<table align="center" width="100%" border="0">
			<tr>
				<td width="50%" align="right">Id:</td>
				<td width="10"></td>
				<td width="50%" align="left">
					<input type="text" name="questionario.id" id="questionario.id" value="${questionario.id}" disabled="disabled" style="width:100px" class="campoDesabilitado" />
					<input type="hidden" name="questionarioId" id="questionarioId" value="${questionario.id}" />
				</td>
			</tr>
			<tr>
				<td width="50%" align="right">Descrição:</td>
				<td width="10"></td>
				<td width="50%" align="left"><input type="text" name="questionario.objetivo" id="questionario.objetivo" value="${questionario.objetivo}" disabled="disabled" style="width:400px"/></td>
			</tr>
		</table>
		
		<br />
		
		<%-- Atribuição das variáveis para usar nos inputs (evitar o nullPointerException) --%>
		<c:if test="${not empty divisaoQuestionario}">
			<c:set scope="request" var="divisaoId" value="${divisaoQuestionario.id}"/>
			<c:set scope="request" var="descricao" value="${divisaoQuestionario.descricao}"/>
		</c:if>
		
		<div id="divisao" align="center">
			<h4>Subdivisão do Questionário</h4>
			
			<table align="center" width="100%" border="0">
				<tr>
					<td width="50%" align="right">Id:</td>
					<td width="10"></td>
					<td width="50%" align="left">
						<input type="text" name="divisaoQuestionario.id" id="divisaoQuestionarioId" value="${divisaoQuestionario.id}" readonly="readonly" style="width:50px" class="campoDesabilitado" />
					</td>
				</tr>
				<tr>
					<td width="50%" align="right">Descrição:</td>
					<td width="10"></td>
					<td width="50%" align="left"><input type="text" name="divisaoQuestionario.descricao" id="divisaoQuestionarioDescricao" value="${divisaoQuestionario.descricao}" style="width:400px"/></td>
				</tr>
			</table>			
		</div>
		
		<br />
		
		<div id="questoes" align="center">
			<h4>Questões Disponíveis</h4>
					
			<c:if test="${not empty questaoList}">
	
				<table width="600" border="0" align="center">
					<thead>
						<tr>
							<th width="20" align="center" scope="col">&nbsp;</th>
							<th width="40" align="center" scope="col">ID</th>
							<th align="left" scope="col">Descrição</th>
						</tr>
					</thead>
					<tbody class="zebrado">
						<c:forEach items="${questaoList}" var="questao" varStatus="i">
							<tr>
								<td align="center">
									<input type="checkbox" name="questoes[${i.index}]" id="questoes[${i.index}]" 
									value="${questao.key.id}" <c:if test="${questao.value == true}">checked="checked"</c:if> />
								</td>
								<td align="center">${questao.key.id}</td>
								<td align="left">${questao.key.descricao}</td>
							</tr>
						</c:forEach>
	
					</tbody>
				</table>
									
			</c:if>
			<c:if test="${empty questaoList}">
				Não foram encontradas questões disponíveis.
			</c:if>
		
		</div>
		
		<br /><br />
		
		<div align="center">
			<input type="button" name="btnSalvar" id="btnSalvar" value="Salvar" />
			<input type="reset" name="btnLimpar" id="btnLimpar" value="Limpar" />
		</div>
	</form>
	
	<div align="center">
		<br /><br /><br />
		<a href="javascript: history.back(-1);">Voltar</a>
	</div>
	
	<c:import url="/WEB-INF/jsp/rodape.jsp"/>
	
</body>
</html>